<!-- 

<template>
  <div 
    class="task-card" 
    :class="{ 'completed-task': task.completed }"
  >
    <div class="task-header">
      <h3>{{ task.title }}</h3>
      <span class="due-date">{{ task.dueDate }}</span> 
    </div>
    其他任务卡片内容
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

// 定义任务的类型接口
interface Task {
  id: string;
  title: string;
  description: string;
  dueDate: string; 
  completed: boolean;
}

// 声明 props，指定 task 的类型为 Task
const props = defineProps({
  task: {
    type: Object as () => Task,
    required: true
  }
});

// 也可以用更简洁的方式（需要 TypeScript 支持）
// const props = defineProps<{
//   task: Task;
// }>();
</script>

<style scoped>
/* 样式保持不变 */
.task-card {
  /* 你的样式 */
}
.completed-task {
  /* 已完成任务的样式 */
}
/* 其他样式 */
</style> -->


<!-- <template>
  <div class="task-card" :class="{ 'completed': task.completed }">
    <div class="task-header">
      <h3>{{ task.title }}</h3>
      <span class="status-tag">{{ task.completed ? '已完成' : '未完成' }}</span>
    </div>
    <p class="description">{{ task.description }}</p>
    <div class="task-meta">
      <span class="due-date">{{ task.dueDate }}</span>
      <button @click="handleDelete" class="delete-button">删除</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { useTaskStore } from '../store/taskStore';
import type { Task } from '../types/task';

const props = defineProps<{
  task: Task;
}>();

const emit = defineEmits([
  'taskToggled',
  'taskDeleted',
  'taskEdited'
]);

const taskStore = useTaskStore();

const handleDelete = () => {
  if (props.task.id) {
    taskStore.deleteTask(props.task.id);
    emit('taskDeleted', props.task.id);
  }
};

const toggleStatus = () => {
  if (props.task.id) {
    taskStore.toggleTaskStatus(props.task.id);
    emit('taskToggled', props.task.id);
  }
};
</script>

<style scoped>
.task-card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.task-card.completed {
  background-color: #f0f0f0;
  opacity: 0.8;
}

.task-card.completed h3 {
  text-decoration: line-through;
  color: #999;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.status-tag {
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-tag[class*='status-'] {
  color: white;
}

.status-tag.status-completed {
  background-color: #67c23a;
}

.status-tag.status-pending {
  background-color: #e6a23c;
}

.description {
  margin-bottom: 1rem;
  color: #666;
}

.task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: #666;
}

.due-date {
  display: flex;
  align-items: center;
}

.delete-button {
  padding: 0.25rem 0.5rem;
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background-color 0.3s;
}

.delete-button:hover {
  background-color: #f78989;
}
</style> -->
<template>
  <div class="task-card" :class="{ 'completed': task.completed }">
    <h3>{{ task.title }}</h3>
    <p class="description">{{ task.description }}</p>
    <p class="due-date"><strong>截止日期:</strong> {{ task.dueDate }}</p>
    <div class="task-actions">
      <!-- 关键修复点：正确绑定toggleTaskStatus事件 -->
      <!-- <button 
        @click="toggleTaskStatus(task.id)" 
        :disabled="task.completed"
        class="status-button"
      >
        {{ task.completed ? '标记为未完成' : '标记为已完成' }}
      </button> -->
      <button @click="deleteTask(task.id)" class="delete-button">删除任务</button>
      <button @click="editTask(task.id)" class="edit-button">编辑任务</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { useTaskStore } from '../store/taskStore';
import type { Task } from '../types/task';

const props = defineProps<{
  task: Task;
}>();

const emits = defineEmits([
  'taskToggled',
  'taskDeleted',
  'taskEdited'
]);

const taskStore = useTaskStore();

// 切换任务状态（确保调用Store方法）
const toggleTaskStatus = (id: string) => {
  taskStore.toggleTaskStatus(id);
  emits('taskToggled', id);
};

const deleteTask = (id: string) => {
  taskStore.deleteTask(id);
  emits('taskDeleted', id);
};

const editTask = (taskId: string) => {
  emits('taskEdited', taskId);
};
</script>

<style scoped>
.task-card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.task-card.completed {
  background-color: #f0f0f0;
  opacity: 0.8;
}

.task-card.completed h3 {
  text-decoration: line-through;
  color: #999;
}

.description {
  margin-bottom: 1rem;
  color: #666;
}

.due-date {
  margin-bottom: 1rem;
  color: #999;
}

.task-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.status-button {
  padding: 0.5rem 1rem;
  background-color: #4a6cf7;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.status-button:hover {
  background-color: #3a5ce7;
}

.delete-button {
  padding: 0.5rem 1rem;
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.delete-button:hover {
  background-color: #f78989;
}

.edit-button {
  padding: 0.5rem 1rem;
  background-color: #67c23a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.edit-button:hover {
  background-color: #5cb827;
}
</style>